import React from 'react'
import PropTypes from 'prop-types'
import { Upload, Icon, Modal, message } from 'antd'
import {reqDeleteImg} from '../../api'
import {BASE_IMG_URL} from "../../utils/constants";

/*
用于图片上传的组件
 */

export default class PicturesWall extends React.Component{
    static propTypes = {
        imgs: PropTypes.array
    }
    state={
        previewVisible: false, // 标识是否显示大图预览Modal
        previewImage: '', // 大图的url
        fileList: [
            /*{
              uid: '-1', // 每个file都有自己唯一的id
              name: 'xxx.png', // 图片文件名
              status: 'done', // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
              url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', // 图片地址
            },*/
        ],
    }
    constructor(props){
        super(props)
        let fileList = []
        // 如果传入了imgs属性
        const {imgs} = this.props
        if(imgs && imgs.length > 0){
            fileList=imgs.map((img,index)=>({
                uid: -index, // 每个file都有自己唯一的id
                name: img, // 图片文件名
                status: 'done', // 图片状态: done-已上传, uploading: 正在上传中, removed: 已删除
                url: BASE_IMG_URL + img
            }))
        }
        // 初始化状态
        this.state={
            previewVisible: false, // 标识是否显示大图预览Modal
            previewImage: '', // 大图的url
            fileList // 所有已上传图片的数组
        }
    }

    /*获取所有已上传图片文件名的数组*/
    getImgs = () => this.state.fileList.map(file => file.name)
    /*关闭大图预览*/
    handleCancel=()=>this.setState({previewVisible: false})
    /*预览大图*/
    handlePreview=(file)=>{
        this.setState({
            previewImage: file.url || file.thumbUrl, // 需要显示的大图的 url
            previewVisible: true,
        })
    }
    /*file: 当前操作文件信息对象,fileList: 所有文件信息对象的数组*/
    handleChange=async ({file, fileList})=>{
        // 如果上传图片完成

        if(file.status === 'done'){
            const result = file.response

            if(result.status === 0){
                message.success(' 上传成功了')
                const {name, url} = result.data
                file.name = name
                file.url = url
            }else {
                message.error(' 上传失败了')
            }
        }else if(file.status === 'removed'){
            const result = await reqDeleteImg(file.name)
            if(result.status===0){
                message.success(' 删除图片成功')
            }else {
                message.error(' 删除图片失败')
            }
        }
        // 更新 fileList 状态
        this.setState({fileList})
    }
    render() {
        const {previewVisible, previewImage, fileList} = this.state
        const uploadButton=(
            <div>
                <Icon type="plus"/>
                <div>上传图片</div>
            </div>
        )
        return(
            <div>
                <Upload
                    action="/manage/img/upload" /*上传图片的接口地址*/
                    accept='image/*'  /*只接收图片格式*/
                    name='image' /*请求参数名*/
                    listType="picture-card"  /*卡片样式*/
                    fileList={fileList}  /*所有已上传图片文件对象的数组*/
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                >
                    {fileList.length >= 4 ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>

        )
    }
}